<template>
	<view v-if="pageShow" class="content" :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
		<!-- #ifdef MP-WEIXIN -->
			<u-sticky v-if="scrollTop>60" offset-top="0">
				<view class="nuoyu-index-header" style="height: 120rpx;z-index: 99;" :style="'--main-bg-color:'+themeColor.main_color">
					<view  class="nuoyu-index-header-item">
						<view v-if="storeList.length>0" class="font-text" @click="selectStore">
							<image style="width: 48rpx;height: 48rpx;border-radius: 6rpx;" :src="storeList[storeIndex].otherConfigJson.logo"></image>
							{{storeList[storeIndex].businessName}}
						</view>
						<u--input
							placeholder="休闲零食"
							prefixIcon="search"
							clearable
							style="background: white;"
							prefixIconStyle="font-size: 22px;color: #eee"
						></u--input>
					</view>
				</view>
			</u-sticky>
		<!-- #endif -->
	
		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
			<u-sticky v-if="scrollTop>60" offset-top="-45">
				<view class="nuoyu-index-header" style="height: 120rpx;z-index: 99;" :style="'--main-bg-color:'+themeColor.main_color">
					<view  class="nuoyu-index-header-item">
						<view v-if="storeList.length>0" class="font-text" @click="selectStore">
							<image style="width: 48rpx;height: 48rpx;border-radius: 6rpx;" :src="storeList[storeIndex].otherConfigJson.logo"></image>
							{{storeList[storeIndex].businessName}}
						</view>
						<u--input
							placeholder="休闲零食"
							prefixIcon="search"
							clearable
							style="background: white;"
							prefixIconStyle="font-size: 22px;color: #eee"
						></u--input>
					</view>
				</view>
			</u-sticky>
		<!-- #endif -->
		
		
		<!-- #ifdef MP-WEIXIN -->
			<view class="nuoyu-index">
				<view class="nuoyu-index-header" :style="{'--main-bg-color':themeColor.main_color}">
					<view  class="nuoyu-index-header-item" style="position:relative;z-index: 99;" :style="{'top':statusBar}">
						<view v-if="storeList.length>0" class="font-text" @click="selectStore">
							<image style="width: 48rpx;height: 48rpx;border-radius: 6rpx;" :src="storeList[storeIndex].otherConfigJson.logo"></image>
							{{storeList[storeIndex].businessName}}
						</view>
						<u--input
							placeholder="休闲零食"
							prefixIcon="search"
							clearable
							style="background: white;"
							prefixIconStyle="font-size: 22px;color: #eee"
						></u--input>
					</view>
				</view>
				
				<!-- 轮播图 -->
				<view v-if="bannerList.length > 0" class="nuoyu-index-header-swiper">
					<u-swiper
						height="130"
						indicator
						:list="bannerList"
						keyName="image"
						@change="change"
					 
					></u-swiper>
				</view>
				<!-- 类目 -->
				<view v-if="categoryList.length > 0" class="nuoyu-index-tag">
					<view @click="toType(item)" v-for="(item,index) in categoryList" class="nuoyu-index-tag-content" :key="index">
						<view >
							<image style="width: 88rpx;height: 88rpx;" :src="getImage(item.image)" mode=""></image>
						</view>
						<view class="nuoyu-index-tag-text">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</view>
		<!-- #endif -->
		
		
		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
		<view class="nuoyu-index">
			<view class="nuoyu-index-header-H5" :style="'--main-bg-color:'+themeColor.main_color">
				<view  class="nuoyu-index-header-item">
					<view v-if="storeList.length>0" class="font-text" @click="selectStore">
						<image style="width: 48rpx;height: 48rpx;border-radius: 6rpx;" :src="storeList[storeIndex].otherConfigJson.logo"></image>
						{{storeList[storeIndex].businessName}}
					</view>
					<u--input
						placeholder="休闲零食"
						prefixIcon="search"
						clearable
						style="background: white;"
						prefixIconStyle="font-size: 22px;color: #eee"
					></u--input>
				</view>
			</view>
			
			<view v-if="bannerList.length > 0" class="nuoyu-index-header-swiper">
				<u-swiper
					height="130"
					indicator
					:list="bannerList"
					keyName="image"
					@change="change"
				 
				></u-swiper>
			</view>
			
			
			
			<view  v-if="categoryList.length > 0" class="nuoyu-index-tag">
				<view @click="toType(item)" v-for="(item,index) in categoryList" class="nuoyu-index-tag-content" :key="index">
					<view >
						<image style="width: 88rpx;height: 88rpx;" :src="getImage(item.image)" mode=""></image>
					</view>
					<view class="nuoyu-index-tag-text">
						{{item.categoryName}}
					</view>
				</view>
			</view>
		</view>
	 
		<!-- #endif -->
		
		
		<!-- 公告区域 -->
		<!-- url="/pages/componentsB/tag/tag" -->
		<u-notice-bar v-if="noticeDict1" :text="noticeDict1.content" :color="'#fff'" :bgColor="themeColor.main_color" speed="100" ></u-notice-bar>
		
		<!-- new秒杀区域 -->
		<!-- <view v-if="list.length > 0" class="swiper-card" :style="{'--main-color':themeColor.main_color}">
			<view class="swiper-card-title">
				<view class="card-name">正在秒杀</view>
				<view class="go-more">查看更多</view>
			</view>
			<liu-swiper-goods :labelColorLeft="themeColor.main_color" :Https="wechatConfig.tencent‌Domain" :labelColorRight="themeColor.main_color" :dataList="list"></liu-swiper-goods>
		</view> -->
		
		<!-- 秒杀区域 -->
	<!-- 	<view class="nuoyu-miaosha" style="background-image: url('../../static/miaosha.png');object-fit: cover;">
			<view class="nuoyu-miaosha-time" :style="{'--main-font-color':themeColor.main_font_color,'--main-font-padding':screenWidth>400?'30%':'28.5%'}">
				<span>01月17日</span>
				<span style="position: relative;left:25rpx">10:00</span>
			</view>
		 
		 
			<view class="nuoyu-miaosha-goods">
				
				<view  @click="goGoods(item)" class="nuoyu-miaosha-image" v-for="(item,index) in goodsList.slice(0,3)" :key="index">
					<view class="Image">
						<image style="height: 100%;width: 100%;border-radius: 8px;" :src="item.previewUrl" mode="aspectFill"></image>
					</view>
					<view class="title">
						<span style="">{{item.goodsName}}</span>
					</view>
					<view class="subtitle">
						<span style="">{{item.subtitle}}</span>
					</view>
					<view class="price" :style="{'--main-font-color':themeColor.main_color}">
						<div class="label" :style="{'--main-font-color':themeColor.main_color}">
							<em>秒杀价格</em>
						</div>
						<div :style="{'--main-font-color':themeColor.main_color}">
							￥{{item.goodsPrice}}
						</div>
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- 商品区域 -->
		<view class="nuoyu-index" v-if="goodsList.length > 0">
			<view class="nuoyu-header">
				<view class="nuoyu-header-text" :style="'--main-bg-color:'+themeColor.main_color">
					活动
				</view>
			</view>
			<view class="nuoyu-goods">
				<view @click="goGoods(item)" class="nuoyu-goods-item" v-for="(item,index) in goodsList" :key="index">
					<!-- <view class="label" :style="'--main-bg-color:'+themeColor.main_color">{{ item.paypal_type | getPaypalType }}</view> -->
					<view class="Image">
						<image style="height: 100%;width: 100%;" :src="item.previewUrl" mode="aspectFill"></image>
					</view>
					<view class="goodsDes">
						<view class="title">
							<view> 
								<!-- <span style="padding-right: 10rpx;">
									<span style="font-size: 16rpx;color: white;padding: 8rpx 8rpx 8rpx 8rpx;border-radius: 8rpx;position: relative;bottom: 6rpx;" :style="{'background':themeColor.main_color}">
										<span style="position: relative;bottom: 2rpx;">活动</span>
									</span>
								</span> -->
								<span style="">{{item.goodsName}}</span>
							</view>
						</view>
						<view v-if="item.rewardIntegral >0" class="rewardIntegral" :style="'--main-bg-color:'+themeColor.assist_color">
							<span>下单赠送积分</span>
							<span>{{item.rewardIntegral}}</span>
						</view>
						<view class="goodsLabel" v-if="item.labelList">
							<view v-if="item1.setting == '1'" :style="{
								color:item1.colorfontColor,
								borderColor:item1.borderColor,
								backgroundColor:item1.backgroundColor
							}" class="goodsLabelItem" v-for="(item1,index1) in item.labelList">
								{{item1.labelName}}
							</view>
							<view v-else>
								<image style="width: 32rpx;height: 32rpx;border-radius: 6rpx;position: relative;top: 4rpx;border: 1px solid #eee;" :src="wechatConfig.tencent‌Domain + item1.image" mode="aspectFill"></image>
							</view>
						</view>
						<view class="goodsPrice" style="display: flex;justify-content: space-between;"> 
							<view class="goodsPrice">
								<view :style="{'color':themeColor.main_color,'fontSize':'38rpx'}">
									￥{{ goodsPriceFunc(item)}}
								</view>
								<view v-if="item.scribePrice" :style="{'color':themeColor.font_assist,'fontSize':'24rpx','position':'relative','top':'15rpx','left':'10rpx'}">
									<text style="text-decoration: line-through;" >￥{{item.scribePrice}}</text>
								</view>
							</view>
							<view>
								<view :style="{'color':themeColor.font_assist,'fontSize':'24rpx','position':'relative','top':'15rpx'}">
									<text>销量200</text>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view style="text-align: center;">加载中...</view>
			<view style="height: 130rpx;"></view>
		</view>
		
		<u-popup round="8" :show="storeShow" mode="bottom"  @close="close" @open="open">
			<view class="popupBg">
				<nuoyu-store :storeList="storeList" :storeIndex="storeIndex" @selectStoreFun="selectStoreFun"></nuoyu-store>
			</view>
		</u-popup>
		
		<u-popup bgColor="transparent" :show="noticeShow" mode="center"  @close="close" @open="open">
			<view class="popupNotice" v-if="noticeDict2">
				<view class="popupNoticeTitme">
					<view>
						<image style="width:64rpx" src="../../static/dian.png" mode="widthFix"></image>
					</view>
					<view :style="{'color':themeColor.main_color,'fontSize':'24rpx'}">
						{{noticeDict2.title}}
					</view>
					<view>
						<image style="width:64rpx;transform: scaleX(-1);" src="../../static/dian.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="popupNoticeCotent">
					<view class="u-content">
						<u-parse :content="noticeDict2.content"></u-parse>
					</view>
				</view>
				<view class="popupNoticeFoot">
					<u-button text="关闭" @click="noticeShow=false"></u-button>
					<u-button text="知道啦" @click="noticeShow=false" :color="themeColor.main_color"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup bgColor="transparent" :show="noticeShowImage" mode="center"  @close="close" @open="open">
			<view v-if="noticeDict3" style="display: flex;flex-direction: column;gap: 12rpx;">
				<image style="width: 300px;" :src="noticeDict3.image" mode="widthFix"></image>
				<view style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 64rpx;" src="../../static/close.png" mode="widthFix" @click="noticeShowImage=false"></image>
				</view>
			</view>
		</u-popup>
		
	 
		<u-popup bgColor="transparent" :show="couponsShow" mode="center" @close="close" @open="open">
			<view v-if="couponsShow" style="display: flex;flex-direction: column;gap: 12rpx;">
				<image v-if="couponsImage.image" @click="getCoupons" style="width: 300px;" :src="wechatConfig.tencent‌Domain+couponsImage.image" mode="widthFix"></image>
				<view style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 64rpx;" src="../../static/close.png" mode="widthFix" @click="couponsShow=false"></image>
				</view>
			</view>
		</u-popup>
		
		
		<!-- <u-popup bgColor="transparent" :show="signInShow" mode="center" >
			<view  style="background: white;border-radius: 16rpx;padding: 20rpx;" :style="{width:screenWidth-40+'px'}">
				<view style="display: flex;flex-direction: column;gap: 12rpx;">
					<view>已经连续签到七天</view>
					<view style="display: grid;grid-template-columns: repeat(3, 1fr);justify-content: center;align-items: center;">
						
						<view style="border:1px solid #eee;border-radius: 8rpx;height: 130rpx;" v-for="(item,index) in sign_in_list">
							<view v-if="item.signInStatus" style="position: absolute;font-size: 16rpx;">已签到</view>
							<view style="text-align: center;font-size: 20rpx;margin-top: 12rpx;">第{{index+1}}天</view>
							<view style="display: flex;justify-content: center;align-items: center;margin-top: 8rpx;">
								<image style="width: 40rpx;height: 40rpx;" :src="wechatConfig.tencent‌Domain+item.image" mode="aspectFill"></image>
							</view>
							<view style="font-size: 20rpx;text-align: center;margin-top: 8rpx;">
								{{item.title}}
							</view>
						</view>
						
					</view>
					
					<view class="popupNoticeFoot">
						<u-button text="关闭" @click="signInShow=false"></u-button>
						<u-button text="签到" @click="playSignIn" :color="themeColor.main_color"></u-button>
					</view>
				</view>
			</view>
		</u-popup> -->
		 
		<nuoyu-tabbar :backgroundColor="themeColor.tabbarColor" :color="themeColor.font_assist" :selectedColor="themeColor.main_color" :current="current" :tabBar="tabBar"></nuoyu-tabbar>
	</view>
</template>

<script>
 
export default {

	  data() {
		return {
			couponsImageInt:'',
			couponsImage:{},
			couponsShow:false,
			noticeShowImage:false,
			noticeShow:false,
			list: [],
			signInShow:false,
			indicator: true,
			storeShow:false,
			current:0,
			tabBar:[],
			themeColor:{},
			value: '',
			list1: [],
			categoryList:[],
			bannerList:[],
			goodsList:[],
			wechatConfig:'',
			storeList:[],
			storeIndex:0,
			storeValue:'',
			noticeList:[],
			scrollTop:0,
			statusBar:0,
			pageShow:false,
			screenWidth:0,
			noticeDict1:'',
			noticeDict2:'',
			noticeDict3:'',
			dingshiqi:'',
			dingshiqiTime:0,
			labelList:[],
			sign_in_id:0,
			sign_in_list:[]
			
		}
	},
	filters:{
		//点击商品
		clickItem(e) {
			console.log('所点击商品信息:', e)
		},
		// 1微信支付、2支付宝支付、3余额支付、4月卡支付，5.微信,余额,支付宝，6.全部
		getPaypalType(value){
			if(value == 1){
				return '商品'
			}
			if(value == 2){
				return '商品'
			}
			if(value == 3){
				return '余额'
			}
			if(value == 4){
				return '月卡'
			}
			if(value == 5){
				return '活动'
			}
			if(value == 6){
				return '活动'
			}
		}
	},
	onPageScroll(e){ 
		this.scrollTop = e.scrollTop
	},
	onLoad() {
		
		// 获取胶囊
		const info = uni.getSystemInfoSync();
		this.statusBar = info.statusBarHeight +'rpx';
		this.screenWidth = info.screenWidth
	 
		// this.statusBar = this.$store.state.statusBarHeigh+'px'

		setTimeout(()=>{
			
			this.tabBar = this.$store.state.tabBarList || uni.getStorageSync('tabbar')
			this.current = this.$store.state.current || 0
			this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
			this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
			
			this.getStore();
			this.getBanner();
			this.getCategory();	
			this.getNotice();
			this.signInList();
			this.getLabel();
			if(uni.getStorageSync('userInfo')){
				this.getCheck();
			}
			
			this.pageShow = true;
		},1000)
		
	 
		
	},
	onShow() {
	    var _this = this;
		this.getSignIn();
		
	},
	methods: {
		signInList(){
			if(uni.getStorageSync('userInfo')){
				this.tui.request("/basic-capi/sign_in/signInList", "get",).then((res) => {
					if(res.code == 200){
						this.sign_in_list = res.data.list;
						var alreadyData = res.data.alreadyData;
						// 先判断有几个签到配置和时间
						let number_day_list = []
						console.log("签到配置",this.sign_in_list)
						for (var index = 0; index < this.sign_in_list.length; index++) {
							if(this.sign_in_list[index].number_day > 1){
								for (var index1 = 0; index1 < this.sign_in_list[index].number_day; index1++) {
									let a = this.sign_in_list[index]
									let b = a
									number_day_list.push(b)
									if(this.sign_in_list[index].number_day-1 != index1){
										number_day_list[4].title = '暂无奖励'
									}
								}
							}else{
								number_day_list.push(this.sign_in_list[index])
							}
						}
						this.sign_in_list = number_day_list;
						// 排查已签到的数据
						if(alreadyData)
							for (var index1 = 0; index1 < this.sign_in_list.length; index1++) {
								for (var index = 0; index < alreadyData.length; index++) {
									if(alreadyData[index].sign_in_id == this.sign_in_list[index1].id){
										this.sign_in_id = this.sign_in_list[index1+1].id
										if(alreadyData[index].status){
											this.sign_in_list[index1].signInStatus = true
										}
									}else{
										this.sign_in_list[index1].signInStatus = false
									}
								}
							
							}
						// else{
						// 	this.sign_in_id[0]
						// }
						console.log(this.sign_in_list)
						
					}
				}).catch((res) => {
					console.log(res)
				})
			}
		},
		playSignIn(){
			
			if(uni.getStorageSync('userInfo')){
				this.tui.request("/basic-capi/sign_in/playSiginIn"+`?sign_in_id=${this.sign_in_id}`, "get",).then((res) => {
					if(res.code == 200){
						uni.showToast({
							title:"签到成功!"
						})
						this.signInShow = false;
					}
				}).catch((res) => {
					console.log(res)
				})
			}
		},
		// 判断是否签到
		getSignIn(){
			this.tui.request("/basic-capi/sign_in/daySiginIn", "get",).then((res) => {
				console.log(res)
				if(res.code == 200 && res.data.list == 0){
					this.signInShow = true;
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		goodsPriceFunc(item){
			if(item.goodsSkuType == '单规格'){
				return item.goodsPrice
			}
			if(item.goodsSkuType == '多规格'){
				const goodsSkuJson = JSON.parse(item.goodsSkuJson)
				return goodsSkuJson.list1[0].skuPrice
			}
		},
		getLabel(){
			 
			this.tui.request("/basic-capi/label/selectLabel", "get",).then((res) => {
				if(res.code == 200){
					this.labelList = res.data.list
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		getCoupons(){
			this.couponsShow = false;
			this.tui.request("/basic-capi/coupons/getCouponsData", "post",).then((res) => {
				if(res.code == 200){
					this.tui.toast('领取成功!')
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		getCheck(){
			this.tui.request("/basic-capi/getCoupons/checkCoupons", "get",).then((res) => {
				if(res.code == 200){
					if(res.data.list.length > 0){
						this.couponsImage = res.data.list[0]
						this.couponsImageInt = setInterval(()=>{
							if(this.noticeShowImage == false && this.noticeShow == false){
								this.couponsShow = true
								clearInterval(this.couponsImageInt)
							}
							
						},750)
					}
					
					
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		showPoster(e){
		var _this = this;               
		_this.$refs.poster.show();
	   },
	   auiPosterCallback(e){
		var _this = this;
		console.log(e); 
	   },
		toType(item) {
			 
			uni.navigateTo({
				url:"/pages/goods/goodsTypeList?id="+item.id
			})
		},
		goGoods(item){
			uni.navigateTo({
				url:`/pages/goods/goodsDetails?goods_id=${item.goods_id}&businessId=${item.businessId}`
			})
		},
		getImage(image){
			return this.wechatConfig.tencent‌Domain + image
		},
		getNotice(){
			this.tui.request("/basic-capi/notice/getNotice", "get",{
				pageNum:1,
				pageSize:10,
			}).then((res) => {
				if(res.code == 200){
					this.noticeList = res.data.list
					this.noticeList.forEach((item,index)=>{
						
						// 判断弹窗时间
						if(new Date(item.endTime).getTime() - new Date().getTime() < 0){
							return
						}
						
						if(item.type == '1'){
							this.noticeDict1 = item;
						}
						if(item.type == '2'){
							this.noticeDict2 = item;
							if(this.noticeShowImage){
								this.dingshiqi = setInterval(()=>{
									if(this.noticeShowImage == false){
										this.noticeShow = true;
										clearInterval(this.dingshiqi)
									}else{
										if(this.dingshiqiTime >= 6){
											clearInterval(this.dingshiqi)
											return 
										}
										this.dingshiqiTime += 1
									}
										
								},1000)
							}else{
								this.noticeShow = true;
							}
						}
						if(item.type == '3'){
							this.noticeDict3 = item;
							this.noticeDict3.image = this.wechatConfig.tencent‌Domain + this.noticeDict3.image;
							if(this.noticeShow){
								this.dingshiqi = setInterval(()=>{
									if(this.noticeShow == false){
										this.noticeShowImage = true;
										clearInterval(this.dingshiqi)
									}else{
										if(this.dingshiqiTime >= 6){
											clearInterval(this.dingshiqi)
											return 
										}
										this.dingshiqiTime += 1
									}
										
								},1000)
							}else{
								this.noticeShowImage = true;
							}
							
						}
					})
						
				}
				
				this.getGoods();
					
			}).catch((res) => {
				console.log(res)
			})
		},
		selectStoreFun(item,index){
			
			this.storeIndex = index;
			this.storeShow = false;
			this.getGoods();
			this.extJsonGetGoods(this.storeList[index].businessId);
		},
		selectStore(){
			this.storeShow = true;
		},
		open() {
			// console.log('open');
		  },
		  close() {
			this.storeShow = false
			// console.log('close');
		  },
		getStore(){
			this.tui.request("/basic-capi/store/getStore", "get",{
				pageNum:1,
				pageSize:10,
			}).then((res) => {
				if(res.code == 200){
					this.storeList = res.data.list
					if(res.data.list.length){
						uni.setStorageSync('store',this.storeList)
						this.storeList.forEach((item)=>{
							if(item.otherConfigJson){
								item.otherConfigJson =  JSON.parse(item.otherConfigJson)
								item.otherConfigJson.logo = this.wechatConfig.tencent‌Domain + item.otherConfigJson.logo
							}
						})
						this.extJsonGetGoods(this.storeList[0].businessId);
					}
					
				}
				
				this.getGoods();
		
			}).catch((res) => {
				console.log(res)
			})
		},
		extJsonGetGoods(businessId){
			this.tui.request("/basic-capi/goods/extJsonGetGoods", "get",{
				pageNum:1,
				pageSize:10,
				extJson:"1",
				businessId:businessId,
				
			}).then((res) => {
				
				if(res.code == 200){
					
					this.list = res.data.list
					// this.goodsList.forEach((item)=>{
					// 	item.previewUrl = this.wechatConfig.tencent‌Domain + item.previewUrl
					// })
				}
			 
			}).catch((res) => {
				console.log(res)
			})
		},
		getGoods(){
			this.tui.request("/basic-capi/goods/getGoods", "get",{
				pageNum:1,
				pageSize:10,
				businessId:this.storeList.length>0?this.storeList[this.storeIndex].businessId : ''
			}).then((res) => {
				if(res.code == 200){
					this.goodsList = res.data.list
					this.goodsList.forEach((item)=>{
						item.previewUrl = this.wechatConfig.tencent‌Domain + item.previewUrl
						if(item.label_ids){
							item.label_ids = JSON.parse(item.label_ids)
							item.labelList = []
							for (var j = 0; j < item.label_ids.length; j++) {
								
								for (var i = 0; i < this.labelList.length; i++) {
									if(this.labelList[i].id == item.label_ids[j]){
										item.labelList.push(this.labelList[i])
										break;
									}
								}
							}
							
							
						}
					})
					
					// setTimeout(()=>{
						
					// 	this.$forceUpdate();
					// },2000)
				}
				
			 
			}).catch((res) => {
				console.log(res)
			})
		},
		// 获取banner图
		getBanner(){
			this.tui.request("/basic-capi/banner/getBanner", "get",{
				pageNum:1,
				pageSize:8,
				type:'首页'
			}).then((res) => {
				if(res.code == 200){
					this.bannerList = res.data.list
					this.bannerList.forEach((item)=>{
						item.image = this.wechatConfig.tencent‌Domain + item.image
					})
				}
			 
			}).catch((res) => {
				console.log(res)
			})
		},
		// 获取商品分类
		getCategory(){
			// 获取商品分类
			this.tui.request("/basic-capi/category/getCategoryHome", "get",{
				pageNum:1,
				pageSize:8
			}).then((res) => {
				if(res.code == 200){
					this.categoryList = res.data.list
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		change(e) {
		  // console.log('change', e);
		}
	}
}
</script>

<style scoped lang="scss">
	page {
	        background-color: #f0f0f0;
			
	        .swiper-card {
	            // width: 96%;
	            background: linear-gradient(180deg, var(--main-color) 0%,var(--main-color) 100%);
	            box-sizing: border-box;
	            margin: 0 auto;
	            margin-top: 30rpx;
	            padding: 20rpx 20rpx 20rpx 20rpx;
	            border-radius: 12rpx;
	
	            .swiper-card-title {
	                margin-bottom: 16rpx;
	                display: flex;
	                align-items: center;
	                justify-content: space-between;
	
	                .card-name {
	                    font-size: 32rpx;
	                    font-weight: bold;
	                    line-height: 32rpx;
	                    color: #FFFFFF;
	                }
	
	                .go-more {
	                    font-size: 28rpx;
	                    line-height: 28rpx;
	                    color: #FFFFFF;
	                    margin-right: 16rpx;
	                }
	            }
	        }
	    }
	.content{
		width: 100%;
		background: #eee;
	 
		// height: 100vh;
		 
	}
	
	.nuoyu-miaosha{
		position: relative;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100%; /* 根据需要设置宽度 */
		height: 600rpx;
		margin-top: 20rpx;
		.nuoyu-miaosha-time{
			font-size: 12px;
			position: relative;
			top: 9.4%;
			z-index: 9;
			padding: 0 var(--main-font-padding);
			color: var(--main-font-color);
			
		}
		.nuoyu-miaosha-goods{
			
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			position: relative;
			top: 85px;
			z-index: 9;
			padding: 0 12px;
			
			.nuoyu-miaosha-image{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				gap: 5px;
				.Image{
					padding: 6px;
					// height: 200rpx;
					height: 200rpx;
					width: 200rpx;
					border-radius: 8px;
				}
				.title{
					display: -webkit-box;
					gap: 10rpx;
					padding: 0 10rpx;
					width: 90%;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.subtitle{
					display: -webkit-box;
					gap: 10rpx;
					font-size: 20rpx;
					padding: 0 10rpx;
					width: 90%;
					-webkit-line-clamp: 2;
					color: #00000099;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.price{
				 
					gap: 10rpx;
					font-size: 30rpx;
					padding: 0 10rpx;
					width: 90%;
					color: var(--main-font-color);
					display: flex;
					.label{
						font-size: 14rpx;
						color: var(--main-font-color);
						padding: 0px 4px;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border:1px solid var(--main-font-color);
					}
				}
			}
			
			
		}
	}
	.nuoyu-index{
		background: white;
	 
	}
	.nuoyu-index-header{
		background-color: var(--main-bg-color);
		width: 100%;
		height: 305rpx;
		color: white;
		font-size: 22rpx;
		position: relative;
		// padding: 20rpx;
		// width: 100%;
	}
	.nuoyu-index-header-H5{
		background-color: var(--main-bg-color);
		width: 100%;
		height: 240rpx;
		color: white;
		font-size: 22rpx;
		// padding: 20rpx;
		// width: 100%;
	}
	.nuoyu-index-header-item{
		padding: 20rpx;
		display: flex;
		gap: 20rpx;
		.font-text{
			display: flex;
			align-items: center;
			gap: 5rpx;
		}
		display: flex;
		align-items: center;
	}
	.nuoyu-index-header-swiper{
		padding: 10rpx 20rpx;
		position: relative;
		bottom: 120rpx;
		height: 30rpx;
		
	}
	.nuoyu-index-tag{
		background: white;
		padding: 20rpx;
		margin-top: 100rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		// grid-auto-rows: 200rpx;
		gap: 20rpx;
		color: #00000099;
		z-index: 999;
	}
	.nuoyu-index-tag-content{
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.nuoyu-index-tag-text{
		font-size: 22rpx;
	}
	.nuoyu-header{
		background: #fff;
		margin:20rpx 20rpx;
		padding: 15px 10px 0 0px;
		.nuoyu-header-text{
			// padding: 15px 10px 0 20px;
			// height: 40rpx;
			padding-left: 10px;
			border-left: 6rpx solid var(--main-bg-color);
		}
	}
	.nuoyu-goods{
		// display: grid;
		// grid-template-columns: repeat(2, 1fr);
		grid-gap: 10rpx;
		padding: 20rpx;
		column-count: 2; /* 设置列数 */
		
		// column-gap: 10rpx; /* 设置列间距 */
		.nuoyu-goods-item{
			break-inside: avoid;
			margin-bottom: 10rpx;
			
			// background-color: #f2f2f2;
			border: 1px solid #ccc;
			border-radius: 5px;
			// padding: 6px;
			// box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
			position: relative;
			
			max-height: 600rpx;
			.label{
				position: absolute;
				font-size: 16rpx;
				// box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
				color: white;
				// background-color:rgba(255,255,255,0.8);   // 透明背景
				padding: 6rpx 16rpx;
				border-radius: 6rpx;
				z-index: 9;
				background-color: var(--main-bg-color);
			}
			.Image{
				padding: 6px;
				// height: 200rpx;
				width: 94%;
				
				height: 300rpx;
				// min-width: 400rpx;
				
				
			}
			.goodsDes{
				padding: 16rpx 6px;
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				.title{
					display: -webkit-box;
					gap: 10rpx;
				 
					width: 100%;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.goodsPrice{
					display: flex;
			 
				}
				
				.rewardIntegral{
					width: 160rpx;
					text-align: center;
					font-size: 16rpx;
					color: var(--main-bg-color);;
					padding: 6rpx 0rpx;
					border-radius: 6rpx;
					z-index: 9;
					border:1px solid var(--main-bg-color);
				}
			}
		}
	 
	}
	
	
 
	  
	  .popupBg{
		  height: 60vh;
		  padding: 20rpx;
	  }
	  .popupNotice{
		// height: 60vh;
		position: relative;
		width:305px;
		border-radius: 8rpx;
		background: white;
		display: flex;
		flex-direction: column;
		z-index:1;
	 
		.popupNoticeTitme{
			height: 80rpx;
			width:100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #444444;
			font-size: 26rpx;
			font-weight: 600;
			
			// background: red;
		}
		.popupNoticeCotent{
			flex: 1;
			padding:0 16rpx;
			// height: 200rpx;
			
		}
		.popupNoticeFoot{
			// padding:0 0rpx 0 20rpx;
			margin: 26rpx;
			height: 80rpx;
			// position: fixed;
			display: flex;
			gap: 20rpx;
			width:90%;
			bottom: 0px;
		}
		// padding: 20rpx;
	  }
	  
	  .u-content {
	      // padding: 24rpx;
	      // font-size: 32rpx;
	      color: $u-content-color;
	      line-height: 1.6;
	    }
	 
	 .goodsLabel{
		 display: flex;
		 flex-wrap: wrap;
		 gap: 6rpx;
		 align-items: center;
	 }
	 .goodsLabelItem{
		 padding: 6rpx 12rpx;
		 border-radius: 6rpx;
		 background: red;
		 font-size: 18rpx;
		 border:1px solid;
	 }
</style>
